
<template>
	<view class="content">
		<view class="header">
			<view class="title">
				TA们刚刚成功获得奖励，您也赶快来试一下吧！
			</view>
			<view class="swiper">
				<swiper circular :indicator-dots="scroll.indicatorDots" :display-multiple-items="scroll.num" vertical :autoplay="scroll.autoplay" :interval="scroll.interval" :duration="scroll.duration">
					<swiper-item v-for="(item,index) in scroll.data">
						<view class="line">
							<template v-if="item.avatar">
								<image class="image" :src="item.avatar||'https://www.soccerpet.com/static/img/default_photo.png'"></image>
							</template>
							<template v-else>
								<image class="image" src="@/static/image/applogo.png"></image>
							</template>
							<view class="name">{{item.nickname}}</view>
							<view class="red">{{item.name}}</view>
							<view>{{$u.timeFormat(item.createTime,'mm-dd hh:MM') }}</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<lzTurntable></lzTurntable>
		<view v-html="html" class="html"></view>
	</view>
</template>
<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import lzTurntable from '@/components/lz-turntable/lz-turntable.vue';
	export default {
		components:{
			lzTurntable
		},
		computed: {
			...mapGetters(['userInfo', 'api']),
		},
		data() {
			return {
				html:'',
				scroll:{
					data:[],
					indicatorDots: false,//是否显示面板指示点
					autoplay: true,//是否自动切换
					interval: 2000,
					duration: 500,
					num:3,//同时显示的滑块数量
				}
			}
		},
		onLoad() {
			//获取规则说明
			this.getPageContent()
			//获取中奖名单
			this.latestPrize()
		},
		methods:{
			latestPrize(){
				let params={}
				uni.$u.http.get(this.api.api_v1_turntable_latestPrize, {params:params}).then(res => {
					if(res.code==200&&res.data){
						this.scroll.data=res.data
					}
				})
			},
			getPageContent(){
				let params={
					id:7
				}
				uni.$u.http.get(this.api.api_v1_getPageContent, {params:params}).then(res => {
					if(res.code==200&&res.data){
						this.html=res.data.content
					}
				})
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	
	.content{
		padding: 5px 10px;box-sizing: border-box;color: #fff;
		.html{
			width: 100%;background-color: #242448;color: #fff;padding: 10px;box-sizing: border-box;
		}
		.header{
			width: 100%;background-color: #242448;color: #fff;padding: 10px;box-sizing: border-box;margin-bottom: 10px;font-size: 12px;
			.title{
				text-align: center;height: 30px;line-height: 30px;border-bottom: 1px solid #4f4f9f;margin-bottom: 10px;
			}
		}
		.line{
			display: flex;align-items: center;padding: 0 10px;box-sizing: border-box;margin-bottom: 10px;width: 750rpx;
			.image{
				width: 35px;height: 35px;border-radius: 50%;margin-right: 10px;
			}
			.red{
				color: red;width: 200rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
			}
			.name{
				width: 200rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
			}
		}
	}
</style>
